<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import axios from "axios";
import global from "../../views/global/global";

const router = useRouter();
let yanma = ref("");
// 绑定验证码
let yantext = ref("");
//验证码图形生成
var show_num = [];
onMounted(() => {
  draw();
});

// 登录
function degnlu() {
  // 先验证用户输入的验证码
  router.push("/home");
  console.log(yanma.value);
  if (yantext.value === yanma.value) {
    console.log("验证成功");
  } else {
    console.log("验证失败");
    draw();
    yantext.value = "";
  }
}

function draw() {
  //得到随机的颜色值
  function randomColor() {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    //	        	return "rgb(" + r + "," + g + "," + b + ")";
    return `rgb(${r},${g},${b})`;
  }

  //
  // alert("验证码：" + show_num.join(""));
  yanma.value = show_num.join("");
  return show_num;
}

</script>
<script>
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";

export default {
  data() {
    return {
      admin: {
        username: '',
        password: ''
      },
      //定义一个空对象。用于接受form表单字段数据
      user: {}
    };
  },
  methods: {
    submitForm() {
      if (this.admin.username  === null || this.admin.username === ""){
        this.$message({
          type: 'error',
          message: '用户名不能为空!'
        });
        return;
      }
      if (this.admin.password  === null || this.admin.password === ""){
        this.$message({
          type: 'error',
          message: '密码不能为空!'
        });
        return;
      }

      axios.post('/login', this.admin, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
      }).then(res => {
        if (res.data.code === 1) {
          this.user = res.data.data
          global.user = this.user
          sessionStorage.setItem('user', JSON.stringify(this.user))
          // 将user传dao show 页面
          this.$router.push({path: '/HomePageView', query: this.user})
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg
          });
        }
      })
    }
  },
  mounted() {
    // 未登录提示
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
    });
    // 修改颜色时 cells 需要全大写字母 可生效
    VANTA.BIRDS({
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      color1: 14381274,
      color2: 16443110,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<template>
  <div class="box">
    <div ref="vantaRef" style="width: 100%; height: 700px"></div>
    <div class="banner">

    </div>
    <div class="loginVideo">
      <div class="loginBox">
        <!-- 登录框 -->
        <div class="container">
          <div class="drop">
            <div class="content">
              <h2 :style="{ color: '#3399ff' }">OA系统管理登录</h2>
              <el-form
                  style="max-width: 400px;margin: 0 auto;"
                  :model="admin"
                  label-width="auto"
                  class="demo-ruleForm"
              >
                <div class="inputBox">
                  <input type="text" v-model="admin.username" placeholder="用户名" style="color: aliceblue"/>

                </div>
                <div class="inputBox">
                  <input type="password" v-model="admin.password" placeholder="密码" style="color: aliceblue"/>

                </div>
                <div>
                </div>
                <div class="inputBox" :style="{ margin: '0 auto' }">
                  <input
                      :style="{ color: 'white' }"
                      type="button"
                      value="登录"
                      @click="submitForm"
                  />
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.loginVideo {
  margin-top: -750px;
  margin-left: 400px;
  z-index: 10000;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.loginBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 登录框 */
.container .drop {
  position: relative;
  width: 450px;
  height: 450px;
  box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
  25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.container .drop:hover {
  border-radius: 10%;
}

.container .drop::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 85px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.container .drop::after {
  content: "";
  position: absolute;
  top: 90px;
  left: 110px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}

.container .drop .content {
  position: relative;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  flex-direction: column;
  text-align: center;
  padding: 40px;
  gap: 15px;
}

.container .drop .content h2 {
  position: relative;
  color: #ffffff;
  font-size: 1.5em;
}

.container .drop .content form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  /* align-items: center; */
}

.container .drop .content form .inputBox {
  position: relative;
  width: 225px;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    inset -2px -5px 10px rgba(255, 255, 255, 1),
  15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
  border-radius: 25px;
}

.container .drop .content form .inputBox::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 5px;
  //background: rgb(255, 255, 255);
  border-radius: 5px;
}

.container .drop .content form .inputBox input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 1em;
  padding: 10px 15px;
}

.container .drop .content form .inputBox input[type="submit"] {
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.container .drop .content form .inputBox:last-child {
  width: 120px;
  background: #3399ff;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
  15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
  transition: 0.5s;
}

.container .drop .content form .inputBox:last-child:hover {
  width: 150px;
}

.box {
  position: relative;

  .banner {
    z-index: 999;
    position: absolute;
    top: 30%;
    left: 10%;
    color: #fff;
  }
}

h1 {
  font-size: 66px;
}

p {
  margin-top: 60px;
  font-size: 18px;
}
</style>